<template>
  <div class="fans-container">
    <el-card>
      <div slot="header">
       <breadcrumb>粉丝管理 </breadcrumb>
      </div>

      <!-- tabs组件 -->
      <el-tabs v-model="activeName" type="card" @click.native="handleClick()">

        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans_list">
              <div class="fans_item"
              v-for="fan in fans"
              :key="fan.id.toString()"
              >
                <el-avatar
                :size="80"
                :src="fan.photo"></el-avatar>
                <p>{{fan.name}}</p>
                <el-button type="primary" plain size="small">+关注</el-button>
              </div>
            </div>

          <!-- 分页 -->

         <el-pagination
              @current-change="hChangePage"
              background
              :page-size="20"
              layout="prev, pager, next"
              :total="total_count">
            </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="粉丝画像" name="echart">
        <!-- 准备dom容器，让echarts在这里画图
            注意：
            1. 要指定宽，高
            2. 设置ref，方便我们访问这个dom元素
            -->
        <div ref="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'fans',
  data () {
    return {
      activeName: 'list',
      curPage: 1,
      fans: [],
      total_count: 0
    }
  },
  created () {
    this.loadFans()
  },
  methods: {
    hChangePage (curPage) {
      // 1. 更新页码
      this.curPage = curPage
      // 2. 重新请求
      this.loadFans()
    },
    async loadFans () {
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/followers',
        params: {
          page: this.curPage
        }
      })
      this.fans = result.data.data.results
      this.total_count = result.data.data.total_count
      console.log(result)
    },
    getFansData () {
      // 获取接口数据，并返回
      // 这个接口不太稳定。如果一时取不到数据，再多试几次
      return this.$http({
        method: 'GET',
        url: '/mp/v1_0/statistics/followers'
      })
    },
    buildDataForEchart (obj) {
      // 接收一个对象，返回两个数组
      const xData = Object.keys(obj).map(item => item.replace('le', '小于').replace('gt', '大于'))

      // const xData = Object.keys(obj).map(item => {
      //   return item.replace('le', '小于').replace('gt', '大于')
      // })

      const yData = Object.values(obj)
      // console.log(obj)
      return {
        xData,
        yData
      }
    },
    async draw () {
      // 0. 取回数据
      const result = await this.getFansData()
      // console.log(result)
      //   (1) 对数据进行加工 --- 数据不能直接在echarts中使用
      const { xData, yData } = this.buildDataForEchart(result.data.data.age)
      console.log(xData, yData)
      //   (2) 填充到对应的options中去
      // 1. 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.main);
      // var myChart = echarts.init(document.getElementById('main'));
      // 2. 指定图表的配置项和数据
      var option = {
        title: {
          text: '粉丝画像'
        },
        tooltip: {},
        xAxis: {
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          data: xData
        },
        yAxis: {},
        series: [{
          name: '年龄分布',
          type: 'line',
          // data: [5, 20, 36, 10, 10, 20]
          data: yData
        }]
      };
      // 3. 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    handleClick () {
      console.log('1111', this.activeName)
      if (this.activeName === 'echart') {
        this.draw()
      }
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
